<template>
  <div>
    <!-- 加载界面 -->
    <!-- <loading v-if="isLoading" /> -->
    <div class="login-register">
      <!-- <img
        src="https://source.unsplash.com/1600x900/?nature,art,craft"
        class="bgImg"
      /> -->
      <div class="slidershow">
        <div
          class="slidershow--image"
          style="
            background-image: url('https://source.unsplash.com/1600x900/?nature');
          "
        ></div>
        <div
          class="slidershow--image"
          style="
            background-image: url('https://source.unsplash.com/1600x900/?art');
          "
        ></div>
        <div
          class="slidershow--image"
          style="
            background-image: url('https://source.unsplash.com/1600x900/?craft');
          "
        ></div>
        <div
          class="slidershow--image"
          style="
            background-image: url('https://source.unsplash.com/1600x900/?handcraft');
          "
        ></div>
      </div>
      <!-- 忘记密码表单组件 -->
      <transition name="el-zoom-in-center">
        <div class="fgtForm" v-if="isforget">
          <forget-form />
        </div>
      </transition>
      <transition appear name="el-fade-in">
        <div class="contain" v-if="!isforget || !isLoading">
          <div class="big-box" :class="{ active: isLogin }">
            <!-- 注册 -->
            <div class="big-contain" key="bigContainRegister" v-if="isLogin">
              <div class="btitle">创建账户</div>
              <div class="bform">
                <!-- 注册表单组件 -->
                <reg-form ref="myReg" />
              </div>
              <button class="bbutton" @click="register" @keyup.enter="register">
                注 册
              </button>
            </div>
            <!-- 登录 -->
            <div class="big-contain" key="bigContainLogin" v-else>
              <div class="btitle">账户登录</div>
              <div class="bform">
                <!-- 登录表单组件 -->
                <log-form ref="myLog" />
                <p class="tips">请输入您看到的五位验证码 (60s有效)</p>
              </div>
              <button class="bbutton" @click="login" @keyup.enter="login">
                登 录
              </button>
              <!-- 忘记密码 -->
              <a
                href="javascript::void"
                class="forget"
                @click="forget"
                ref="forgetCpt"
                >忘记密码？</a
              >
            </div>
          </div>
          <div class="small-box" :class="{ active: isLogin }">
            <div class="small-contain" key="smallContainLogin" v-if="isLogin">
              <div class="stitle">Hola amigo!</div>
              <p class="scontent">开始注册加入我们!</p>
              <button class="sbutton" @click="changeType">登 录</button>
              <p class="sline">已有账号,前往登录</p>
            </div>
            <div class="small-contain" key="smallContainRegister" v-else>
              <div class="stitle">Welcome back!</div>
              <p class="scontent">开启探索精美工艺之旅!</p>
              <button class="sbutton" @click="changeType">注 册</button>
              <p class="sline">没有账号,前往注册</p>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import Loading from "../components/loaders/Loading.vue";
import RegForm from "../components/RegForm.vue";
import LogForm from "../components/LogForm.vue";
import ForgetForm from "../components/ForgetForm.vue";
export default {
  components: { Loading, RegForm, LogForm, ForgetForm },
  name: "Login",
  data() {
    return {
      isLoading: true,
      isLogin: false,
      isforget: false,
      form: {
        username: "",
        useremail: "",
        userpwd: "",
      },
    };
  },
  methods: {
    getForm() {
      setTimeout(() => {
        this.isLoading = !this.isLoading;
      }, 500);
    },
    changeType() {
      this.isLogin = !this.isLogin;
      this.form.username = "";
      this.form.useremail = "";
      this.form.userpwd = "";
      this.cfmpwd = "";
    },
    login() {
      this.$refs.myLog.submitForm("logForm");
    },
    register() {
      this.$refs.myReg.submitForm("regForm");
    },
    /* 忘记密码组件切换 */
    forget() {
      this.isLoading = true;
      this.isforget = !this.isforget;
    },
  },
  mounted() {
    this.getForm();
    this.$bus.$on("back", this.forget);
  },
  beforeDestroy() {
    this.$bus.$off("back");
  },
};
</script>

<style scoped>
* {
  overflow: hidden;
}
.login-register {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}
.tips {
  position: absolute;
  font-size: 11px;
  color: #777;
  line-height: 1em;
  bottom: 6.5rem;
  left: 6rem;
}

.contain {
  width: 40%;
  height: 60%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffffb9;
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0, 0 0 6px #f0f0f0;
}
.big-box {
  width: 70%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 40%;
  transform: translateX(-7%);
  transition: all 1s;
}
.big-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btitle {
  font-size: 1.5em;
  font-weight: bold;
  color: #343434;
  letter-spacing: 3px;
}
.bform {
  width: 100%;
  height: 55%;
  padding: 1em 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.fgtForm {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bbutton {
  width: 20%;
  height: 40px;
  border-radius: 24px;
  border: none;
  outline: none;
  background-color: #39a7b0;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}
.forget {
  position: relative;
  right: -30%;
  font-size: 0.8em;
  color: gray;
  text-decoration: underline;
}
.small-box {
  width: 43%;
  height: 100%;
  background: linear-gradient(135deg, #39a6b03d, #39a3add9, #39a3ad);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0%);
  transition: all 1s;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.small-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.stitle {
  font-size: 1.7em;
  font-weight: bold;
  color: #fff;
}
.scontent {
  font-size: 0.9em;
  letter-spacing: 1.2px;
  color: #fff;
  text-align: center;
  padding: 1em 1em;
  line-height: 1.7em;
}
.sline {
  font-size: 0.7em;
  letter-spacing: 1.2px;
  text-decoration: underline;
  color: #fff;
  text-align: center;
  padding: 0.5em 1em;
  line-height: 1.7em;
}
.sbutton {
  width: 60%;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #fff;
  outline: none;
  margin-top: 2.5em;
  background-color: transparent;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}

.big-box.active {
  left: 0;
  transition: all 0.5s;
}
.small-box.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}
.slidershow {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -100;
}

.slidershow--image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: kenburns;
  animation-name: kenburns;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.slidershow--image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
  animation-name: kenburns-1;
  z-index: 3;
}

.slidershow--image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
  animation-name: kenburns-2;
  z-index: 2;
}

.slidershow--image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
  animation-name: kenburns-3;
  z-index: 1;
}

.slidershow--image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
  animation-name: kenburns-4;
  z-index: 0;
}

@-webkit-keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}

@keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@-webkit-keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@-webkit-keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
</style>
